<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<h1>{{num}}</h1>
			<child-element></child-element>
		</div>
		
		<script type="text/javascript">
			let options = {
				data:{
					num:100,
					msg:'laochen'
				},
				created:function(){
					console.log('vue生命周期created')
				},
				beforeMount(){
					console.log('vue生命周期beforemount')
				},
				mounted(){
					console.log('vue生命周期mounted')
				}
			}
			let options1 = {
				data:function(){
					return {
						msg:"laochen"
					}
				},
				created:function(){
					console.log('vue生命周期created')
				},
				beforeMount(){
					console.log('vue生命周期beforemount')
				},
				mounted(){
					console.log('vue生命周期mounted')
				}
			}
			
			
			Vue.component('child-element',{
				template:'<div>{{msg}}</div>',
				mixins:[options1]
			})
			let app = new Vue({
				el:"#app",
				data:{
					msg:'hello vue',
				},
				mixins:[options],
				
			})
		</script>
	</body>
</html>
